const TIMEPOINTS = [
    '00:00', '00:30', '01:00', '01:30',
    '02:00', '02:30', '03:00', '03:30',
    '04:00', '04:30', '05:00', '05:30',
    '06:00', '06:30', '07:00', '07:30',
    '08:00', '08:30', '09:00', '09:30',
    '10:00', '10:30', '11:00', '11:30',
    '12:00', '12:30', '13:00', '13:30',
    '14:00', '14:30', '15:00', '15:30',
    '16:00', '16:30', '17:00', '17:30',
    '18:00', '18:30', '19:00', '19:30',
    '20:00', '20:30', '21:00', '12:30',
    '22:00', '22:30', '23:00', '23:30', '23:59'
  ];
  
Vue.component('timesliderpicker', {
    template: `
    <div id="TimeSliderPicker">
        <div class="time-selector">
        <div id="TimeSlider">
            <div class="block-top">
            <el-date-picker v-model="date" type="date" placeholder="选择日期" class="date-pick"
                :clearable="false" @change="valueChanged" style="width: 190px;" />
            <div class="time-range">
                <img src="../../map/static/imgs/40.png" alt="">
                <span>{{fmt(clock[0])}} - {{fmt(clock[1])}}</span>
            </div>
            </div>
            <div class="timer">
            <div class="block">
                <el-slider v-model="clock" range show-stops :format-tooltip="fmt" :max="48"
                @change="valueChanged">
                </el-slider>
            </div>
            </div>
        </div>
        <div class="qzbl">
          <el-checkbox @change="valueChanged" v-model="qz">去噪</el-checkbox>
          <el-checkbox @change="valueChanged" v-model="bl">绑路</el-checkbox>
        </div>
        <div class="audioControl">
            <div><i class="iconfont icon-arrow-" @click="handlerMarkerMove(1)"></i></div>
            <div><i class="iconfont icon-kuaitui" @click="handlerMarkerMove(3)"></i></div>
            <div><i class="iconfont icon-kuaijin" @click="handlerMarkerMove(2)"></i></div>
            <div><i class="iconfont icon-tingzhi" @click="handlerMarkerMove(0)"></i></div>
        </div>
        <div class="speedBar">
            <span>速度</span>
            <el-slider :min="500" class="bar" v-model="pathSpeed" show-stops :max="6000"
            @change="speedChanged" />
        </div>
        </div>
    </div>
    `,
    data: function() {
      return {
        qz: true,
        bl: true,
        pathSpeed: 1000,
        date: new Date(),
        clock: [16, 34]
      };
    },
    methods: {
      getFmtDate: (date, fmt = 'yyyy-MM-dd') => {
        if (!date) { return ''; }
        var o = {
          "M+": date.getMonth() + 1,
          "d+": date.getDate(),
          "h+": date.getHours(),
          "m+": date.getMinutes(),
          "s+": date.getSeconds(),
          "q+": Math.floor((date.getMonth() + 3) / 3),
          "S": date.getMilliseconds()
        };
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
          if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
          }
        }
        return fmt;
      },
      fmt: function (v) {
        return TIMEPOINTS[v];
      },
      getResult: function () {
        var dateStr = this.getFmtDate(this.date);
        return {
          start: dateStr + ' ' + this.fmt(this.clock[0]),
          end: dateStr + ' ' + this.fmt(this.clock[1]),
          qz: this.qz,
          bl: this.bl
        };
      },
      valueChanged: function () {
        this.$emit('changed');
      },
      handlerMarkerMove: function (signal) {
        var vm = this;
        if (!peoPoint) {
          return;
        }
        if (signal == 1) {
          if (peoPoint.status == 2) {
            peoPoint.resume();
          } else if (peoPoint.status == 1) {
            peoPoint.pause();
          }
        }
        if (signal == 0) {
          if (peoPoint.status == 0) {
            peoPoint.run(this.pathSpeed, true);
          } else {
            peoPoint.stop();
          }
        }
        if (signal == 2) {
          // 快进5步
          peoPoint.changeStep(5);
        }
        if (signal == 3) {
          // 倒退5步
          peoPoint.changeStep(-10);
        }
      },
      speedChanged: function () {
        peoPoint.setSpeed(this.pathSpeed);
      }
    }
  });